<template>
  <Page background="#15283F">
    <p-header :title="symbol + ' withdrawal'"/>
    <GridLayout rows="*, auto">
      <ScrollView row="0" orientation="vertical" >
        <StackLayout class="content">
          <label class="label" text="Available"/>
          <TextField :text="available.toFixed(6) + ' ' + symbol" isEnabled="false"/>
          <label class="label" text="Withdrawal Address"/>
          <TextField v-model="address" hint="Enter or paste address"/>
          <label class="label" text="Amount"/>
          <GridLayout class="comp-input" columns="*, auto">
            <TextField col="0" v-model="amount" :hint="'Min ' + minAmount" class="input" returnKeyType="done" keyboardType="number"/>
            <Label col="1" class="unit" :text="symbol"/>
          </GridLayout>
          <label class="label" text="Fee"/>
          <GridLayout class="comp-input" columns="*, auto">
            <TextField isEnabled="false" col="0" v-model="minFee" class="input"/>
            <Label col="1" class="unit" :text="symbol"/>
          </GridLayout>
          <label textWrap="true" class="label" v-for="(item, index) in tips" :text="item" :key="index"/>
        </StackLayout>
      </ScrollView>
      <Gridlayout row="1" class="bottom" height="100" columns="*, *" rows="*, auto">
        <label col="0" row="0" class="recei-amount" text="Receive Amount" horizontalAlignment="left"/>
        <label col="1" row="0" class="recei-value" :text="receiveAmount" horizontalAlignment="right"/>
        <Button row="1" colSpan="2" class="confirm" text="Confirm" @tap="confirmPressed"/>
      </Gridlayout>
    </GridLayout>
  </Page>
</template>
<script>
import Header from '~/components/common/Header'
import loaderGen, {loadingOption} from '~/utils/loading'
import {dataBus} from '~/business/DataBus'

export default {
  props: ['symbol'],
  data()  {
    return {
      available: 0,
      minAmount: 0,
      maxAmount: 0,
      minFee: 0,
      address: '',
      amount: '',
      tips:[],
    }
  },
  computed: {
    receiveAmount() {
      if (!this.amount || isNaN(this.amount)) {
        return 0.0.toFixed(6)
      }
      return (parseFloat(this.amount) - this.minFee).toFixed(6) + ' ' + this.symbol
    }
  },
  components: {
    'p-header': Header,
  },
  methods: {
    confirmPressed() {
      if (!this.address || !this.amount) {
        alert('Please input the Address, Amount and Fee')
        return
      }
      if (parseFloat(this.amount) > this.available) {
        alert("There is not enough available")
        return
      }
      const self = this
      self.loader.show(loadingOption)
      dataBus.withDraw({
        "coin": this.symbol,
        "address": this.address,
        "amount": parseFloat(this.amount)
      }, {
        onSuccess: ret => {
          self.loader.hide()
          alert({
            title: 'Success',
            message: 'Withdraw successfully',
            okButtonText: 'OK'
          })
          self.amount = ''
        },
        onError: (code, msg) => {
          self.loader.hide()
          alert(msg)
        }
      })
    },
    calTips() {
      this.tips = [`• Minimum withdrawal: ${this.minAmount} ${this.symbol}.`,
      `• Maximum withdrawal: ${this.maxAmount} ${this.symbol}.`,
      "• Please ensure that your browser and computer are both secure and protected from third party intrusion."]
    }
  },
  mounted() {
    this.loader = loaderGen()
    this.loader.show(loadingOption)
    this.available = dataBus.wallet.balances[this.symbol].available
    const self = this
    dataBus.loadWalletCoin(this.symbol, {
      onSuccess: ret => {
        self.loader.hide()
        let config = ret.widthdrawConfig
        self.minFee = config.feeBase
        self.minAmount = config.minValue
        self.maxAmount = config.maxValue
        self.calTips()
      },
      onError: (code, msg) => {
        self.loader.hide()
        alert(msg)
      }
    })
  }
}
</script>
<style scoped>
.content {
  margin-left: 20;
  margin-right: 20;
  height: auto;
}
.label {
  color: #6292BE;
  font-size: 14;
  margin-top: 10;
}
.content>TextField, .comp-input {
  color: white;
  font-size: 16;
  height: 50;
  border-width: 1;
  border-color: #274867;
  padding-left: 14;
  margin-top: 10;
}
TextField {
  placeholder-color: rgba(255, 255, 255, 0.5);
}
.unit {
  color: #6292BE;
  font-size:16;
  margin-right: 17;
}
.bottom {
  background: #15283F;
  padding-left: 11;
  padding-right: 11;
  padding-bottom: 11;
}
.recei-amount {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14;
}
.recei-value {
  color: white;
  font-size: 14;
}
.confirm {
  color: white;
  font-size: 16;
  background: linear-gradient(to right, #01C4E7, #0081D8);
  height: 50;
}
</style>
